<template>
    <div class="content_container">
        <div class="phone" :style="{'background-color': page.info.content.background}">

            <el-scrollbar style="width: calc(100% + 60px); padding-right: 60px;">

                <div style="width: 375px; position: relative;z-index: 9; padding-bottom: 80px; border-box: box-sizing;">

                    <div class="top_bg"  style="z-index: 0" v-if="page.info.content.background_image">
                        <img class="img" :src="page.info.content.background_image">
                    </div>

                    <el-affix :offset="110" :target="'.phone'">
                        <div class="select_item" :class="{'selected': selectedComponent.index==-1}"
                             :style="{'background': navBarBackground_c}"
                             @click="componentSelect({}, -1)"
                        >
                            <div class="status_bar">
                                <img class="img" src="@/assets/image/diy_top_bar.png">
                            </div>

                            <div class="top_nav">
                                <div class="flex_1 p15" style="text-align: left;"
                                     :style="{'color': page.info.content.title_color}"
                                     v-if="page.info.content.show_title == 1">{{page.info.content.title}}</div>

                                <div class="top_nav_right">
                                    <img class="img" src="@/assets/image/diy_nav_bar_right.png">
                                </div>
                            </div>
                        </div>

                    </el-affix>

                    <div class="select_item" :class="{'selected': selectedComponent.index==index}"
                         v-for="(com,index) in page.info.content.components" key="name"
                         @click="componentSelect(com,index)"
                    >
                        <el-space class="handle" direction="vertical">
                            <el-button type="primary" icon="Delete" circle size="small" @click="handleComponent(index,'del')" />
                            <el-button type="primary" icon="ArrowUp" circle size="small" @click="handleComponent(index, 'up')" />
                            <el-button type="primary" icon="ArrowDown" circle size="small" @click="handleComponent(index, 'down')" />
                        </el-space>

                        <diy-goods-cate :data="com" v-if="com.name == 'goods_cate'" />
                        <grid :data="com" v-if="com.name == 'grid'" />
                        <banner :data="com" v-if="com.name == 'banner'" />
                        <image-list :data="com" v-if="com.name == 'image'" />
                        <article-list :data="com" v-if="com.name == 'article'" />
                        <search :data="com" v-if="com.name == 'search'" />
                        <diy-header :data="com" v-if="com.name == 'header'" />
                        <diy-goods :data="com" v-if="com.name == 'goods'" />
                        <sell-card :data="com" v-if="com.name == 'sell_card'" />
                    </div>
                </div>
            </el-scrollbar>

            <!--                底部导航-->
            <div class="select_item tab_bar_select_item" :class="{'selected': selectedComponent.index==-2}"
                 v-if="page.info.content.show_tab_bar==1"
                 @click="componentSelect(page.info.content.tab_bar, -2)"
            >
                <tab-bar :data="page.info.content.tab_bar" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import {computed, inject, reactive} from "vue";
import Grid from "@/views/site/diy/components/Phone/Grid.vue";
import Banner from "@/views/site/diy/components/Phone/Banner.vue";
import ImageList from "@/views/site/diy/components/Phone/ImageList.vue";
import ArticleList from "@/views/site/diy/components/Phone/ArticleList.vue";
import Search from "@/views/site/diy/components/Phone/Search.vue";
import DiyGoods from "@/views/site/diy/components/Phone/DiyGoods.vue";
import SellCard from "@/views/site/diy/components/Phone/SellCard.vue";
import TabBar from "@/views/site/diy/components/Phone/TabBar.vue";
import DiyHeader from "@/views/site/diy/components/Phone/DiyHeader.vue";
import DiyGoodsCate from "@/views/site/diy/components/Phone/DiyGoodsCate.vue";

const page: any = inject("page")

const selectedComponent: any = inject("selectedComponent")

const componentSelect = (com: any, index: number) => {
    selectedComponent.info = com
    selectedComponent.index = index
}

const tabBar_c = computed(() => {
    return page.info.content.tabBar;
})

const navBarBackground_c = computed(() => {
    return page.info.content.navbar_type==1 ? page.info.content.navbar_background:'none'
})

const handleComponent = (index: number, type:string) => {
    if (type == 'del'){
        page.info.content.components.splice(index,1)
    }else if (type == 'up') {
        if (index > 0){
            const res = page.info.content.components.splice(index,1)
            page.info.content.components.splice(index-1, 0, res[0])
        }
    }else if (type == 'down') {
        if (index < (page.info.content.components.length-1)){
            const res = page.info.content.components.splice(index,1)
            page.info.content.components.splice(index+1, 0, res[0])
        }
    }
}

</script>

<style scoped lang="scss">
@use "src/views/site/diy/style.css";

.content_container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .phone {
        width: 375px;
        height: 812px;
        background-color: #fff;
        box-shadow: 0 1px 4px #00152914;
        position: absolute;
        //border-radius: 8px;

        .status_bar{
            height: 40px;
        }
        .top_nav{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 44px;
            text-align: center;
            line-height: 44px;
            .top_nav_right{
                width: 87px;
                height: 32px;
                flex-shrink: 0;
            }
        }

        .select_item {
            position: relative;
            padding: 0.1px 0;
            &.selected:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px dashed #00a0e9;
                cursor: move;
                z-index: 1;
            }

            .handle{
                position: absolute;
                right: -32px;
                top:0;
                display: none;
            }
            &.selected{
                .handle{
                    display: block;
                }
            }

        }

        .tab_bar_select_item{
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 999;
        }

    }
}

</style>
